<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>管理员系统</title>
    <link rel="stylesheet" href="../static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo">管理员：<span id="adminAccount"></span></div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">
                    <a href="javascript:;">
                        <span id="adminAccountNav"></span>
                    </a>
                </li>
                <li class="layui-nav-item"><a href="http://localhost:63342/StudentManageSystem-Thymeleaf/templates/login.html">退出</a></li>
            </ul>
        </div>
        
        <div class="layui-body" style="padding: 15px;">
            <div class="layui-card">
                <div class="layui-card-header">
                    <button class="layui-btn" id="addTeacher">添加教师</button>
                </div>
                <div class="layui-card-body">
                    <table id="teacherTable" lay-filter="teacherTable"></table>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加教师表单模板 -->
    <script type="text/html" id="teacherForm">
        <form class="layui-form" style="margin: 20px;">
            <div class="layui-form-item">
                <label class="layui-form-label">账号</label>
                <div class="layui-input-block">
                    <input type="text" name="account" required lay-verify="required" placeholder="请输入账号" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="1" title="男" checked>
                    <input type="radio" name="sex" value="2" title="女">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="saveTeacher">保存</button>
                </div>
            </div>
        </form>
    </script>

    <!-- 添加表格工具栏模板 -->
    <script type="text/html" id="tableToolbar">
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script src="../static/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'layer'], function(){
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.$;
            
            // 设置全局 Ajax 默认值
            $.ajaxSetup({
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true
            });
            
            // 初始化表格
            table.render({
                elem: '#teacherTable',
                url: 'http://localhost:8050/api/backend/user/teacher/list',
                parseData: function(res){ 
                    console.log('接收到的原始数据：', res); // 添加调试日志
                    var result = {
                        "code": 0,  // 修改这里：layui 表格要求成功码为 0
                        "msg": res.message,
                        "count": res.data ? res.data.length : 0, // 添加空值判断
                        "data": res.data || [] // 添加空值判断
                    };
                    console.log('解析后的数据：', result); // 添加调试日志
                    return result;
                },
                cols: [[
                    {field: 'id', title: 'ID', width: 80},
                    {field: 'code', title: '工号', width: 120},
                    {field: 'userName', title: '姓名'},
                    {field: 'account', title: '账号'},
                    {field: 'sex', title: '性别', templet: function(d){
                        return d.sex === 1 ? '男' : '女';
                    }},
                    {field: 'createTime', title: '创建时间', templet: function(d){
                        return d.createTime ? d.createTime.split('T')[0] : '';  // 格式化时间显示
                    }},
                    {title: '操作', width: 120, templet: '#tableToolbar'} // 新增操作列
                ]],
                response: {
                    statusCode: 0  // 重要：规定成功的状态码为 0
                }
            });
            
            // 添加教师按钮点击事件
            $('#addTeacher').on('click', function(){
                layer.open({
                    type: 1,
                    title: '添加教师',
                    content: $('#teacherForm').html(),
                    area: ['500px', '400px'],
                    success: function(){
                        form.render('radio');
                    }
                });
            });
            
            // 保存教师表单提交事件
            form.on('submit(saveTeacher)', function(data){
                $.ajax({
                    url: 'http://localhost:8050/api/backend/user/teacher',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(data.field),
                    success: function(res){
                        if(res.code === 200){
                            layer.msg('添加成功');
                            layer.closeAll('page');
                            table.reload('teacherTable');
                        }else{
                            layer.msg(res.message);
                        }
                    }
                });
                return false;
            });
            
            // 添加获取当前用户信息的请求
            $.ajax({
                url: 'http://localhost:8050/api/backend/user/current',
                type: 'GET',
                success: function(res) {
                    if(res.code === 200 && res.data) {
                        $('#adminAccount').text(res.data.account);
                        $('#adminAccountNav').text(res.data.account);
                    }
                }
            });

            // 添加表格工具条事件监听
            table.on('tool(teacherTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'del'){
                    layer.confirm('确认要删除该教师吗？', function(index){
                        $.ajax({
                            url: 'http://localhost:8050/api/backend/user/teacher/delete',
                            type: 'POST',
                            contentType: 'application/json',
                            data: JSON.stringify({
                                id: data.id
                            }),
                            success: function(res){
                                if(res.code === 200){
                                    layer.msg('删除成功');
                                    obj.del();
                                }else{
                                    layer.msg(res.message || '删除失败');
                                }
                            }
                        });
                        layer.close(index);
                    });
                }
            });
        });
    </script>
</body>
</html> 